<template>
    <li>
      <label>
          <!--@click 也可以使用@change事件-->
          <input type="checkbox" :checked="todoObj.completed" @click="handleChange(todoObj.id)"/>
          <!-- <input type="checkbox" v-model="todoObj.completed"/> 修改了props里面的属性, 不推荐 -->
          <span>{{todoObj.title}}</span>
      </label>
      <button class="btn btn-danger" @click="deleteObj(todoObj.id)">删除</button>
  </li>
  
</template>

<script>
export default {
  name: 'TodoItem',
  props: ['todoObj','handleCheck','handleDelete'],
  methods: {
    handleChange(id) {
      console.log('@@@@'+id)
      this.handleCheck(id)
    },
    deleteObj(id) {
      console.log('@@@@'+id)
      if(window.confirm('确定删除吗?')) {
        this.handleDelete(id)
      }
    }
  },
}
</script>

<style scoped>
  /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
    }

    li label {
    float: left;
    cursor: pointer;
    }

    li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
    }

    li button {
    float: right;
    display: none;
    margin-top: 3px;
    }

    li:before {
    content: initial;
    }

    li:last-child {
    border-bottom: none;
    }
    li:hover{
      background-color: #f5f5f5;
    }
    li:hover button{
      display: block;
    }
</style>